<!--<template>-->
<!--  <div>-->
<!--    <CellGroup title="页面展示">-->
<!--      <Cell is-link title="我的页面模板一" @click="router.push({ path: '/my/News' })"></Cell>-->
<!--      <Cell is-link title="我的页面模板二" @click="router.push({ path: '/my/homework' })"></Cell>-->
<!--    </CellGroup>-->
<!--    <CellGroup title="常规操作">-->
<!--      <Cell is-link clickable title="退出登录" title-style="color:red;" @click="logout()"></Cell>-->
<!--    </CellGroup>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup name="My">-->
<!--import { Cell, CellGroup } from "vant";-->
<!--import { useRouter } from "vue-router";-->
<!--import { useUserStore } from "@/stores/user";-->
<!--import { logout } from "@/v-api/login";-->
<!--import router from "@/router";-->

<!--</script>-->

<!--<style>-->
<!--</style>-->
<script setup>
import { logout } from "@/v-api/login";
import { ref, watch } from 'vue';
import router from "@/router";
import {Cell, CellGroup, Grid, GridItem, Icon, Image} from 'vant';
import { Local } from "@/utils/storage";
import { getOssPrefix } from "@/v-api/properties"
import Audio from "@/components/Audio/index.vue";
const userInfo = Local.get('userInfo')
const roleText = ref('');
roleText.value = userInfo.role === 1 ? '领导' : userInfo.role === 2 ? '老师' : userInfo.role === 3 ? '家长' : userInfo.role === 4 ? '学生' : '';

const url = getOssPrefix()+userInfo.iconUrl;
// alert(url);
</script>

<template>
  <div class="cell_bg">
  <div class="profile-container">
    <Image
        round
        fit="cover"
        class="custom-border-image"
        width="150px"
        height="150px"
        :src="url"
    />
  </div>
  <CellGroup>
    <Cell v-if="userInfo.role === 3" title="学号" :value="userInfo.userId" size="larger" icon="smile" style="font-size: large" title-style="font-size:18px;margin-left: 10px;"/>
    <Cell title="用户名" :value="userInfo.username" size="larger" icon="manager" style="font-size: large" title-style="font-size:18px;margin-left: 10px;"/>
    <Cell title="联系电话" :value="userInfo.phone" size="larger" icon="phone" style="font-size: large" title-style="font-size:18px;margin-left: 10px;"/>
    <Cell is-link clickable title="修改信息" size="larger" icon="column" style="font-size: large" title-style="font-size:18px;margin-left: 10px;" @click="router.push({ path: '/my/modify' })"/>
    <Cell is-link clickable title="完善信息" size="larger" icon="add-square" style="font-size: large" title-style="font-size:18px;margin-left: 10px;" @click="router.push({ path: '/my/perfect' })"/>
<!--    <Cell v-if="userInfo.role === 1" is-link clickable title="更多功能" size="larger" icon="more" style="font-size: large" title-style="font-size:18px;margin-left: 10px;" @click="router.push({ path: '/my/more' })"/>-->
    <Cell is-link clickable title="退出登录" size="larger" icon="wap-home" style="font-size: large" title-style="color:red;font-size:18px;margin-left: 10px;" @click="logout()"></Cell>
  </CellGroup>
  <div class="bottom_first">
  </div>
<!--  <div class="bottom_second">-->
<!--  </div>-->
  </div>
</template>

<style scoped>
.cell_bg{
  background-color: #d9f2ac;
  height: 100%;
}
.profile-container {

    height: 200px;
    background-image: url("@/assets/images/bg.png");
    background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;

}

.custom-border-image {
  border: 10px solid #d9f2ac; /* 设置边框粗细和颜色 */
  box-sizing: border-box; /* 确保边框宽度不会增加元素的尺寸 */
}

table {
  border-collapse: collapse;
  width: 100%;
  background-color: white;
  margin: 0 auto;
}


th {
  background-color: #f2f2f2;
}

.bottom_first{
  height: 30px;
  background-color: white;
}

.bottom_second{
  width: 100%;
  overflow: hidden; /* 隐藏超出内容 */
  height: 150px; /* 设置高度 */
  background-color: #d9f2ac;
}
</style>